<template>
  <el-dialog
    v-model="dialogVisible"
    title="事项办理"
    width="40%"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <el-scrollbar max-height="60vh" v-loading="loading || fileLoading">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="85px"
      >
        <el-form-item label="办理反馈" prop="completionDesc">
          <el-input
            v-model="formData.completionDesc"
            type="textarea"
            :autosize="{
              minRows: 5,
            }"
          />
        </el-form-item>
        <el-form-item label="审核人" prop="nextProcessUserId">
          <SelectApproveUser
            v-model="formData.nextProcessUserId"
            :type="ESelectApproveUserType.DEAL"
            :feedbackId="formData.feedbackId"
          />
        </el-form-item>
        <el-form-item label="反馈材料">
          <FileUpload ref="fileUploadRef" v-model="formData.fileList" />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit">提交分管领导审核</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, useTemplateRef } from 'vue'
import FileUpload from '@/components/FileUpload.vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
import { getFileIdStr, initIFileList } from '@/plugins/file'
import { feedbackCompletionDesc } from '@/api/mission/process'
import { Message } from '@/hooks/message'
import SelectApproveUser from '@/components/user/SelectApproveUser.vue'
import { ESelectApproveUserType } from '@/api/sys/userManage'
import useFetch from '@/hooks/useFetch'
import { EFileForType, getFileByTypeAndId } from '@/api/file'

const {
  loading: fileLoading,
  execute,
  onFetchSuccess,
} = useFetch(getFileByTypeAndId, {})

onFetchSuccess((data) => {
  formData.fileList = initIFileList(data) ?? []
})

const emit = defineEmits(['update'])

const formRef = useTemplateRef<FormInstance>('formRef')
const fileUploadRef =
  useTemplateRef<InstanceType<typeof FileUpload>>('fileUploadRef')
const dialogVisible = ref(false)
const loading = ref(false)

const formData = reactive({
  matterId: null,
  deadlineId: null,
  feedbackId: null,
  completionDesc: '',
  nextProcessUserId: null,
  fileList: [],
})

const rules = ref<FormRules<typeof formData>>({
  completionDesc: {
    required: true,
    message: '请填写办理反馈',
    trigger: 'blur',
  },
  nextProcessUserId: {
    required: true,
    message: '请选择审核人',
    trigger: 'change',
  },
})

defineExpose({ show })

async function show(row: any) {
  dialogVisible.value = true
  Object.assign(formData, {
    matterId: row.matterId,
    deadlineId: row.id,
    feedbackId: row.feedbackId,
  })
  await execute({
    type: EFileForType.FEEDBACK,
    id: row.feedbackId,
  })
}

function close() {
  dialogVisible.value = false
  loading.value = false
  formRef.value.resetFields()
  fileUploadRef.value.clearFileList()
  Object.assign(formData, {
    matterId: null,
    deadlineId: null,
    feedbackId: null,
    completionDesc: '',
    nextProcessUserId: '',
    fileList: [],
  })
}

function submit() {
  formRef.value.validate(async (bool: boolean) => {
    if (!bool) {
      return
    }

    ElMessageBox.confirm('确定提交吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        const postData = {
          matterId: formData.matterId,
          deadlineId: formData.deadlineId,
          feedbackId: formData.feedbackId,
          completionDesc: formData.completionDesc,
          nextProcessUserId: formData.nextProcessUserId,
          fileIds: getFileIdStr(formData.fileList),
        }

        const { data } = await feedbackCompletionDesc(postData)
        if (data.status === 200) {
          Message({
            message: data.data,
            type: 'success',
          })

          emit('update')
          close()
        }
      })
      .catch(() => {})
  })
}
</script>

<style scoped lang="scss"></style>
